<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <h1>{{ tagName }}</h1>
        <el-button class="button" type="text" :icon="Back" @click="reback">后退</el-button>
      </div>
      <tags-wall :tags="tags"></tags-wall>
    </template>
    <article-list ref="articleAction" :tagName="tagName"></article-list>
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { onBeforeRouteUpdate, useRoute } from 'vue-router';
import { Back } from '@element-plus/icons-vue'
import type { Tag } from '@/api/type';
import { getTags, } from '@/api/request';

const articleAction = ref()

const route = useRoute()

const tagName = ref()

const tags = ref<Tag[]>()

onMounted(async () => {
  tagName.value = route.params.name
  tags.value = await getTags()
})

onBeforeRouteUpdate(async to => {
  if (to.params.name) {
    tagName.value = to.params.name
  }
})

const reback = () => {
  history.back()
}
</script>

<style lang="less" scoped>
.el-card {
  width: 80%;
  margin-left: 10%;
  padding: 0;
}
</style>